<script setup lang="ts">
import dayjs from 'dayjs';

interface Props {
  /**
   * 工单事件列表
   */
  list: AppSysWorkOrder.eventDto[];
}

const props = withDefaults(defineProps<Props>(), {
  list: () => [],
});
</script>

<template>
  <view class="app-work-order-event-list">
    <view class="app-work-order-event-item" v-for="(item, index) in props.list" :key="item.id">
      <view class="app-work-order-event-item--left">
        <text class="app-work-order-event-item__time">
          {{ dayjs(item.handleTime).format('MM/DD HH:mm') }}
        </text>
      </view>
      <view class="app-work-order-event-item--center">
        <view class="app-work-order-event-item__dot"></view>
        <view v-if="index + 1 !== props.list.length" class="app-work-order-event-item__line"></view>
      </view>
      <view class="app-work-order-event-item--right">
        <view class="app-work-order-event-item__name">{{ item.eventName }}</view>
        <view v-if="item.handleUserName">
          <text v-if="item.eventCode === 'draft_task'">创建人:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'assign_task'">派单人:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'receive_task'">接单人:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'process_task'">处理人:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'review_task'">审核人:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'suspend_task'">挂起人:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'suspend_review_task'">审批人:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'resume_task'">操作人:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'cooperate_complete_task'">协同人:&nbsp;&nbsp;</text>
          <text v-else>操作人:&nbsp;&nbsp;</text>
          <text>{{ item.handleUserName }}</text>
        </view>
        <view v-if="item.handleDurationDesc">
          <text>处理时长:&nbsp;&nbsp;</text>
          <text>{{ item.handleDurationDesc }}</text>
        </view>
        <view v-if="item.hangEndTime">
          <text>预计解挂时间:&nbsp;&nbsp;</text>
          <text>{{ dayjs(item.hangEndTime).format('YYYY-MM-DD') }}</text>
        </view>
        <view v-if="item.assignUserName">
          <text v-if="item.eventCode === 'assign_task'">被指派人:&nbsp;&nbsp;</text>
          <text v-if="item.eventCode === 'forward_task'">被转派人:&nbsp;&nbsp;</text>
          <text v-if="item.eventCode === 'cooperate_task'">协同人:&nbsp;&nbsp;</text>
          <text>{{ item.assignUserName }}</text>
        </view>
        <view v-if="item.taskUserInfo">
          <text>待处理用户:&nbsp;&nbsp;</text>
          <text>{{ item.taskUserInfo }}</text>
        </view>
        <!-- <view v-if="item.content">
          <text>内容:&nbsp;&nbsp;</text>
          <text>{{ item.content }}</text>
        </view> -->
        <view
          v-if="
            item.reviewStatus &&
            item.eventCode &&
            ['review_task', 'suspend_review_task', 'resume_task'].includes(item.eventCode)
          "
        >
          <text>审批结果:&nbsp;&nbsp;</text>
          <text :style="{ color: { 1: '#09bb07', 2: '#f52f3e' }[item.reviewStatus] }">
            {{ { 1: '通过', 2: '不通过' }[item.reviewStatus] }}
          </text>
        </view>
        <view v-if="item.opinion">
          <text v-if="item.eventCode === 'receive_task'">接单意见:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'review_task'">审核意见:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'suspend_task'">挂起意见:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'suspend_review_task'">审批意见:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'resume_task'">解挂意见:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'forward_task'">转派意见:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'cooperate_task'">协同意见:&nbsp;&nbsp;</text>
          <text v-else-if="item.eventCode === 'cooperate_complete_task'"
            >协同意见:&nbsp;&nbsp;
          </text>
          <text v-else>操作意见:&nbsp;&nbsp;</text>
          <text>{{ item.opinion }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
